{% load i18n %}
<div id="scenariotoast" class="toast"><div style="position: relative; left: -50%">
  <h1><span class="btn btn-primary"></span></h1>
</div></div>
<table id="scenarios" style="width:100%">
  <tr>
    <th style="padding:5px 10px 5px 10px; text-align: center">{% trans 'scenario'|capfirst %}</th>
    <th style="padding:5px 10px 5px 10px; text-align: center">{% trans 'action'|capfirst %}</th>
    <th style="padding:5px 10px 5px 10px; text-align: center">
      <span data-toggle="tooltip" data-placement="top" data-html="true"
        data-original-title="{% trans "<b>In use</b>: Contains data<br><b>Free</b>: Available to copy data into<br><b>Busy</b>: Data copy in progress" %}">
      {% trans 'status'|capfirst %}
      <span class="fa fa-question-circle"></span>
      </span>
    </th>
    <th style="padding:5px 10px 5px 10px; text-align: center">
      <span data-toggle="tooltip" data-placement="top" data-original-title="{% trans "Label shown in the scenario dropdown list" %}>
      {% trans 'label'|capfirst %}
      <span class="fa fa-question-circle"></span>
      </span></th>
    <th style="padding:5px 10px 5px 10px; text-align: center">
      <span data-toggle="tooltip" data-placement="top" data-original-title="{% trans "Date of the last state change" %}">
      {% trans 'last modified'|capfirst %}
      <span class="fa fa-question-circle"></span>
      </span>
    </th>
  </tr>
  {% for j in scenarios %}
  {% if j.name in free_scenarios or j.name in active_scenarios %}
  <tr>
    <td style="padding:5px">
      <strong>{{j.name|capfirst}}</strong>
    </td>
    <td style="padding:5px 10px 5px 10px">
       {% if j.name != DEFAULT_DB_ALIAS and j.name in free_scenarios and perms.common.copy_scenario %}
       <div class="btn-group btn-block">
       <button class="btn btn-block btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
         {% trans 'manage'|capfirst %}&nbsp;<span class="caret"></span>
       </button>
       <ul class="dropdown-menu" rol="menu">
         <li><a class="scenariocopy" href="#" data-source="{{ current_database }}" data-target="{{ j.name }}">
           Copy from {{ current_database }}
         </a></li>
       </ul>
       </div>
       {% elif j.name != DEFAULT_DB_ALIAS and j.status == 'In use'%}
       {% if j.name in release_perm or j.name in promote_perm  %}
       <div class="btn-group btn-block">
       <button class="btn btn-block btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
         {% trans 'manage'|capfirst %}&nbsp;<span class="caret"></span>
       </button>
       <ul class="dropdown-menu" rol="menu">
         {% if j.name in release_perm %}
         <li><a class="scenariorelease" href="#" data-target="{{ j.name }}">
         {% trans "Release: You will lose ALL data in this scenario!" %}
         </a></li>
         {% endif %}
         {% if j.name in promote_perm and current_database == j.name %}
         <li><a class="scenariopromote" href="#" data-source="{{ j.name }}" data-target="{{ DEFAULT_DB_ALIAS }}" >
         {% trans "Promote: All data will be copied to Production" %}
         </a></li>
         {% endif %}
       </ul>
       </div>
       {% endif %}
       {% endif %}
    </td>
    {% if j.name in free_scenarios %}
    <td style="padding:5px 10px 5px 10px; text-align: center">{% trans 'Free' %}</td>
    {% else %}
    <td style="padding:5px 10px 5px 10px; text-align: center">{% trans j.status|lower|capfirst %}</td>
    {% endif %}
    <td style="padding:5px 10px 5px 10px">
      <input class="scenariolabel" type="text" data-target="{{ j.name }}"
      value="{% if j.description %}{{j.description|escape}}{% else %}{{ j.name }}{% endif %}">
    </td>
    <td style="padding:5px 10px 5px 10px; text-align: center">{{j.lastrefresh|date:"Y-m-d G:i:s"}}</td>
  </tr>
  {% endif %}
  {% endfor %}
</table>

<script>
$(".scenariorelease").on("click", function(event) {
  event.preventDefault();
  var target = "/" + $(this).attr("data-target");
  if (target == "/default")
    target = "";
  $.ajax({
   url: target + "/execute/launch/scenario_copy/",
   type: 'POST',
   data: {release: 1},
   complete: function() {
     $("#scenariotoast").addClass("show");
     $("#scenariotoast span").text("Scenario released");
     setTimeout(function(){$("#scenariotoast").removeClass("show") }, 3000);
     if (target == url_prefix) window.location.href = "/"; }
   });
});
$(".scenariopromote").on("click", function(event) {
  event.preventDefault();
  var source = "/" + $(this).attr("data-source");
  $.ajax({
   url: source + "/execute/launch/scenario_copy/",
   type: 'POST',
   data: {
     promote: 1,
     source: $(this).attr("data-source"),
     destination: $(this).attr("data-target")
     },
   success: function() {
     $("#scenariotoast").addClass("show");
     $("#scenariotoast span").text("Launched promotion task");
     setTimeout(function(){$("#scenariotoast").removeClass("show") }, 3000);
   }});
});
$(".scenariocopy").on("click", function(event) {
  event.preventDefault();
  var source = "/" + $(this).attr("data-source");
  if (source == "/default")
    source = "";
  $.ajax({
   url: source + "/execute/launch/scenario_copy/",
   type: 'POST',
   data: {
     copy: 1,
     source: $(this).attr("data-source"),
     destination: $(this).attr("data-target")
     },
   success: function() {
     $("#scenariotoast").addClass("show");
     $("#scenariotoast span").text("Launched copy task");
     setTimeout(function(){$("#scenariotoast").removeClass("show") }, 3000);
   }});
});
$(".scenariolabel").on("change", function(event) {
  event.preventDefault();
  var target = "/" + $(this).attr("data-target");
  if (target == "/default")
    target = "";
  $.ajax({
   url: target + "/execute/launch/scenario_copy/",
   type: 'POST',
   data: {
     update: 1,
     description: $(this).val()
     },
   success: function() {
     $("#scenariotoast").addClass("show");
     $("#scenariotoast span").text("Updated description");
     setTimeout(function(){
       $("#scenariotoast").removeClass("show");
       }, 3000);
    }
   });
});
</script>
